<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Renewset, RenewsetShow } from "@/http/api";

export default {
  components: { outMain },
  name: "",
  data() {
    const checkIntNumber = (rule, value, callback) => {
      let result = this.$ruleCheck.checkIntNumber(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    return {
      formData: {
        enterprise_money: "",
        staff_money: "",
        train_money: "",
        shipowner_money: "",
      },
      rules: {
        enterprise_money: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        staff_money: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        train_money: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        shipowner_money: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      let data = this.formData;
      Renewset(data).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "保存成功",
          });
        }
      });
    },
    getData() {
      RenewsetShow().then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>账号续费</div>
        </div>
        <div class="formMain">
          <div class="stepCont">
            <div class="formDes flexPull">
              <div class="desTitle">
                <div>账号续费配置项</div>
              </div>
              <el-form :rules="rules" ref="ruleForm" :model="formData">
                <div class="pullCont hasTop">
                  <el-form-item
                    label-width="150"
                    prop="enterprise_money"
                    label="企业账号续费"
                  >
                    <el-input
                      v-model="formData.enterprise_money"
                      placeholder="请输入企业账号续费"
                    >
                      <template #append>鲸币/年</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label-width="150"
                    prop="staff_money"
                    label="员工账号续费"
                  >
                    <el-input
                      v-model="formData.staff_money"
                      placeholder="请输入员工账号续费"
                    >
                      <template #append>鲸币/年</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label-width="150"
                    prop="train_money"
                    label="培训账号续费"
                  >
                    <el-input
                      v-model="formData.train_money"
                      placeholder="请输入办证培训账号续费"
                    >
                      <template #append>鲸币/年</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label-width="150"
                    prop="shipowner_money"
                    label="船东账号续费"
                  >
                    <el-input
                      v-model="formData.shipowner_money"
                      placeholder="请输入船东账号续费"
                    >
                      <template #append>鲸币/年</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item class="flexPull" label=" " label-width="150">
                    <btn value="保存设置" @ok="saveFn"></btn>
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
